<template>
	<view class="content">
		<swiper class="swiper" circular :indicator-dots="true" :interval="2000" :duration="500">
			<swiper-item v-for="(item,index) in form" :key="index">
				<view class="swiper-item">
					<view>
						{{item.type}}
					</view>
					<view style="font-size: 60px;">{{item.time}}
					</view>
					<view style="font-size: 25px;margin: 5px 0 10px 0;">
						{{item.title}}
					</view>
					<view class="btn" @click="confirm">确定</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: [{
					type: "古文",
					time: "06:30",
					title: "早读",
					status: 0
				}, {
					type: "别睡懒觉",
					time: "06:00",
					title: "起床",
					status: 0
				}, {
					type: "吃早餐",
					time: "07:00",
					title: "早餐",
					status: 0
				}]
			};
		},
		onReady() {
			const a = document.getElementsByClassName('uni-page-head-hd')[0]
			a.style.display = 'none';
		},
		methods:{
			confirm() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {}

	.swiper {
		height: 100vh;
	}

	.swiper-item {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: #fff;

		.btn {
			border-radius: 50rpx;
			padding: 10rpx 50rpx;
			background-color: #5e5e5e;
			width: 180rpx;
			margin: 0 auto;
		}
	}
</style>